$(function() {
  var pages = 1;
  var pageSize = "3";
  function again() {
    $.ajax({
      type: "get",
      url: "/product/queryProductDetailList",
      data: {
        page: pages,
        pageSize: pageSize
      },
      dataType: "json",
      success: function(res) {
        // console.log(res);
        $("tbody").html(template("tmp", res));
        paging(res.total);
      }
    });
  }
  again();

  // 分页
  function paging(total) {
    $("#paginator").bootstrapPaginator({
      bootstrapMajorVersion: 3, //默认是2，如果是bootstrap3版本，这个参数必填
      currentPage: pages, //当前页
      totalPages: Math.ceil(total / pageSize), //总页数
      size: "small", //设置控件的大小，mini, small, normal,large
      onPageClicked: function(event, originalEvent, type, page) {
        //为按钮绑定点击事件 page:当前点击的按钮值
        pages = page;
        again();
      }
    });
  }

  // 添加商品
  // 渲染 下拉框
  $.ajax({
    type: "get",
    url: "/category/querySecondCategoryPaging",
    data: {
      page: 1,
      pageSize: 100
    },
    dataType: "json",
    success: function(res) {
      console.log(res);
      $(".por-tow").html(template("tmp1", res));
      $(".por-tow").on("click", "a", function() {
        $(".pro-btn").text($(this).text());
        // 把 id 存储到 隐藏域中
        $(".brandId").val($(this).data("id"));
        $(".add-form")
          .data("bootstrapValidator")
          .updateStatus("brandId", "VALID");
      });
    }
  });

  var arr = [];
  // 图片上传
  $("#picArr").fileupload({
    dataType: "json",
    //e：事件对象
    //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
    done: function(e, data) {
      var str = data.result;
      arr.unshift(str);
      $(".box-img").prepend($('<img src="' + str.picAddr + '" height="60">'));
      if (arr.length > 3) {
        // 删除数组最后一位
        arr.pop();
        // 删除最后一个 img
        $(".box-img img:last-child").remove();
      }
      if (arr.length == 3) {
        $(".picArr").val(JSON.stringify(arr));
        $(".add-form")
          .data("bootstrapValidator")
          .updateStatus("picArr", "VALID");
      }
    }
  });

  // 商品校验
  //使用表单校验插件
  $(".add-form").bootstrapValidator({
    //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
    excluded: [":disabled"],

    //2. 指定校验时的图标显示，默认是bootstrap风格
    feedbackIcons: {
      valid: "glyphicon glyphicon-ok",
      invalid: "glyphicon glyphicon-remove",
      validating: "glyphicon glyphicon-refresh"
    },

    //3. 指定校验字段
    fields: {
      //校验用户名，对应name表单的name属性
      brandId: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请选择二级分类"
          }
        }
      },

      proName: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入产品名称"
          }
        }
      },
      proDesc: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入商品描述"
          }
        }
      },

      num: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入产品库存"
          },
          regexp: {
            regexp: /^[1-9]\d*$/,
            message: "商品库存格式, 必须是非零开头的数字"
          }
        }
      },
      size: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入产品尺寸"
          },
          regexp: {
            regexp: /^[1-9]\d-[1-9]\d$/,
            message: "尺码格式, 必须是 xx-xx"
          }
        }
      },

      oldPrice: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入产品原价"
          },
          regexp: {
            regexp: /^[1-9]\d*(.\d{1,2})?$/,
            message: "商品价格, 必须是非零开头的数字"
          }
        }
      },
      price: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入产品价格"
          },
          regexp: {
            regexp: /^[1-9]\d*(.\d{1,2})?$/,
            message: "商品价格, 必须是非零开头的数字"
          }
        }
      },
      picArr: {
        validators: {
          //不能为空
          notEmpty: {
            message: "需要要上传三张图片"
          }
        }
      }
    }
  });

  // 添加数据
  $(".add-form").on("success.form.bv", function(e) {
    e.preventDefault();
    var str = $(".add-form").serialize();
    $.ajax({
      type: "post",
      url: "/product/addProduct",
      data: str,
      dataType: "json",
      success: function(res) {
        console.log(res);
        again();
        // 重置
        $(".add-form")
          .data("bootstrapValidator")
          .resetForm(true);
        // 重置 下拉框
        $(".pro-btn").text("请选择二级分类");
        // 隐藏 模态框
        $(".pro-modal").modal("hide");
        // 重置上传图片
        $(".box-img").empty();
        // 清空数组
        arr = [];
        // console.log(arr);
      }
    });
  });
});
